<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>报告页面</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/index.css" rel="stylesheet">

</head>
<body>
<div class="container" style="text-align: center">
    <h1>嘉兴南湖学院网页自纠正报告</h1>
    <p style="margin-top: 5px;">基于网络爬虫自动检查和大语言模型的语法纠错的网页检查项目</p>
</div>
<div class="container">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md4">
            <div class="layui-card" style="height: 8em">
                <div class="layui-card-header show-header">
                    存在问题的链接个数
                </div>
                <div class="layui-card-body show-body" id="result-total">
                    -
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card" style="height: 8em">
                <div class="layui-card-header show-header">
                    队列中的链接个数
                </div>
                <div class="layui-card-body show-body" id="queue-total">
                    -
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card" style="height: 8em">
                <div class="layui-carousel" id="process-task-carousel">
                    <div carousel-item id="process-item-show">

                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" action="">

                        <div class="layui-form-item" style="margin-bottom: unset">
                            <div class="layui-inline">
                                <label class="layui-form-label">添加 URL</label>
                                <div class="layui-input-inline layui-input-wrap">
                                    <input type="text" name="url" lay-verify="required" autocomplete="off"
                                           lay-reqtext="请填写需要添加检查的 URL 地址" lay-affix="clear"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid" style="padding: 0 !important;">
                                    <button type="submit" class="layui-btn" lay-submit lay-filter="add-url">立即提交
                                    </button>
                                    <button type="button" class="layui-btn layui-bg-red" lay-on="clear-cache">清理缓存
                                    </button>
                                    <button type="button" class="layui-btn layui-bg-orange" lay-on="auto-task">
                                        定时任务
                                    </button>
                                    <button type="button" class="layui-btn layui-bg-blue" lay-on="send-email">
                                        统计邮件
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-border"
                                            lay-on="refresh-table">
                                        <i class="layui-icon layui-icon-refresh-3"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="table-result"></table>
                </div>
            </div>
        </div>
    </div>
</div>

{% raw %}
<script id="process-item-show-template" type="text/html">
    {{# for(let i = 0; i < d.total; i++) { }}
    <div class="process-show" id="process-item-show-{{= i }}">
        <a href="https://www.jxnhu.edu.cn/info/1403/9160.htm" target="_blank">
            <div class="layui-row">
                <div class="status-container">
                    <span class="status-icon-process"
                          style="background-color: #1890ff;"></span>
                    <span class="status-text"
                          style="color: #1890ff; font-weight: 1000">处理中</span>
                </div>
            </div>
            <div class="layui-row"
                 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
            >
                《学校召开2025年度党的建设暨全面从严治党工作会议》
            </div>
            <div class="layui-row">
                <div class="processing">
                    <span>大语言模型正在对文章语法进行分析...</span>
                </div>
            </div>
        </a>
    </div>
    {{#  } }}
</script>


<script type="text/html" id="reason-table-template">
    {{# if (d.fix_info !== 'fixed') { }}
    {{# if (d.reason.mistake.length === 1) {  }}
    <a style="color: red"><strong>{{= d.reason.mistake[0].error_type }}</strong></a>
    {{# } else { }}
    <a style="color: red"><strong>多种错误</strong></a>
    {{# } }}
    {{# } else { }}
    <a style="color: #00972f"><strong>已修复</strong></a>
    {{# } }}
</script>

<script type="text/html" id="table-tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">
            <i class="layui-icon layui-icon-tips"></i>
        </a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="link">
            <i class="layui-icon layui-icon-link"></i>
        </a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
</script>

<script type="text/html" id="auto-task-form">
    <form class="layui-form layui-form-pane" action="" style="padding: 30px" lay-filter="auto-task-form">
        <div class="layui-form-item">
            <label class="layui-form-label">提醒邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="receiver_email" autocomplete="off" placeholder="输入提醒邮箱"
                       lay-verify="required"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">提醒时间</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="reminder_hour" placeholder="" autocomplete="off" class="layui-input"
                           min="0" step="1" max="23" value="9" lay-affix="number">
                </div>
                <div class="layui-form-mid">时</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="reminder_minute" placeholder="" autocomplete="off" class="layui-input"
                           min="0" step="1" max="59" value="0" lay-affix="number">
                </div>
                <div class="layui-form-mid">分</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">其他设置</label>
            <div class="layui-input-block">
                <input type="checkbox" name="auto_index" lay-skin="tag" title="每日自动重检测主页" checked>
                <input type="checkbox" name="auto_cache_clear" lay-skin="tag" title="每日自动清理非文章缓存" checked>
            </div>
        </div>
    </form>
</script>


{% endraw %}

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(function () {
        let layer = layui.layer;
        let carousel = layui.carousel;
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;
        let util = layui.util;
        let dropdown = layui.dropdown;
        let $ = layui.jquery;

        let process_count = 0;

        let carousel_ins = carousel.render({
            elem: '#process-task-carousel',
            width: 'auto',
            height: '8em',
            // autoplay: false,
            indicator: 'none'
        });

        form.on('submit(add-url)', function (data) {
            var field = data.field;

            $.ajax({
                url: '/queue',
                type: 'POST',
                data: field,
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.msg, {icon: 1})
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            })

            return false; // 阻止默认 form 跳转
        });


        util.on('lay-on', {
            "refresh-table": function (othis) {
                table.reloadData("table-result", {url: '/queue'});
            },
            "clear-cache": function (othis) {
                let loadIndex = layer.load(0);
                $.ajax({
                    url: '/clear',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loadIndex);
                        layer.msg(res.msg, {icon: 1})
                    }
                })
            },
            "auto-task": function (othis) {
                let loadIndex = layer.load(0);
                $.ajax({
                    url: '/config',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loadIndex);
                        layer.open({
                            type: 1,
                            area: ['500px', '350px'],
                            title: '定时任务设置',
                            shade: 0.6, // 遮罩透明度
                            shadeClose: true, // 点击遮罩区域，关闭弹层
                            anim: 0,
                            content: $("#auto-task-form").html(),
                            btn: ['确认', '取消'],
                            success: function (layero, index) {
                                form.render(null, 'auto-task-form');
                                form.val('auto-task-form', res.data);
                            },
                            yes: function (index, layero) {
                                let loadIndex = layer.load(0);
                                $.ajax({
                                    url: '/config',
                                    type: 'POST',
                                    data: form.val('auto-task-form'),
                                    dataType: 'json',
                                    success: function (res) {
                                        layer.close(loadIndex);
                                        layer.msg(res.msg, {icon: 1})
                                        layer.close(index);
                                    }
                                })
                            }
                        });
                    }
                })
            },
            "send-email": function (othis) {
                let loadIndex = layer.load(0);
                $.ajax({
                    url: '/send',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1})
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    }
                })
            }
        });


        var inst = table.render({
            elem: '#table-result',
            cols: [[
                {field: 'id', title: 'ID', sort: true, align: 'center', width: 80, type: 'desc'},
                {field: 'note', title: '来源说明', align: 'center', width: 550},
                {field: 'reason', title: '勘误原因', align: 'center', width: 130, templet: '#reason-table-template'},
                {field: 'url', title: '目标地址', align: 'center', width: 300},
                {field: 'depth', title: '搜寻深度', align: 'center', width: 100},
                {field: 'create_time', title: '发现时间', align: 'center', width: 150},
                {field: 'tool', title: '操作', align: 'center', templet: '#table-tool'},
            ]],
            url: '/queue',
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.result_total, // 解析数据长度
                    "data": res.result // 解析数据列表
                };
            },
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 10 // 每页默认显示的数量
        });

        // 定时请求获取数据
        setInterval(function () {
            $.ajax({
                url: '/queue',
                type: 'GET',
                data: {
                    'limit': 0,
                    'page': 1
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        // 更新正常处理的个数并重新渲染
                        if (process_count !== res.process.length) {
                            process_count = res.process.length;

                            laytpl($("#process-item-show-template").html()).render({total: process_count}, function (str) {
                                $("#process-item-show").html(str);
                            });

                            carousel_ins.reload();
                        }

                        // 更新上面的显示的参数
                        $('#result-total').text(res.result_total);
                        $('#queue-total').text(res.queue_total);

                        // 更新每一个进度
                        for (let i = 0; i < process_count; i++) {
                            let process_task = res.process[i];

                            let code = process_task.code;
                            let note = process_task.note;
                            let status = process_task.status;
                            let url = process_task.url;

                            let color = '#1890ff';
                            let process_text = '处理中';

                            if (code === 0) {
                                color = '#5B952A';
                                note = '-';
                                status = '空闲状态';
                                process_text = '等待中';
                                url = '#';
                            }

                            document.querySelector(
                                `#process-item-show-${i} > a > div:nth-child(1) > div > span.status-icon-process`
                            ).style.backgroundColor = color;
                            document.querySelector(
                                `#process-item-show-${i} > a > div:nth-child(1) > div > span.status-text`
                            ).style.color = color;
                            document.querySelector(
                                `#process-item-show-${i} > a > div:nth-child(1) > div > span.status-text`
                            ).textContent = process_text;

                            document.querySelector(`#process-item-show-${i} > a `).href = url;
                            document.querySelector(`#process-item-show-${i} > a > div:nth-child(2)`).textContent = ' ' + note + ' ';
                            document.querySelector(`#process-item-show-${i} > a > div:nth-child(3) > div > span`).textContent = ' ' + status + ' ';

                        }

                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            })
        }, 1000);


        table.on('tool(table-result)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'detail') {
                layer.open({
                    title: '查看详情 - id:' + data.id,
                    type: 2,
                    area: ['80%', '80%'],
                    content: '/detail',
                    success: function (layero, index, that) {
                        let iframeWin = window[layero.find('iframe')[0]['name']];
                        iframeWin.render_info = obj.data.reason;
                        iframeWin.render();
                    }
                });
            } else if (obj.event === 'link') {
                window.open(data.url, '_blank');
            } else if (obj.event === 'more') {
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '切换修复状态',
                        id: 'mark_fixed'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'mark_fixed') {
                            let loadIndex = layer.load(0);

                            $.ajax({
                                url: '/fixed',
                                type: 'GET',
                                data: {
                                    id: data.id,
                                },
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, {icon: 1})
                                    } else {
                                        layer.msg(res.msg, {icon: 2})
                                    }
                                    layer.close(loadIndex);
                                    table.reloadData("table-result", {url: '/queue'});
                                }
                            })

                        }
                    },
                    id: 'dropdown-table-tool',
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                });
            }

        });

    });
</script>
</body>
</html>